import BackgroundImg from "@assets/bg01.jpg";
import VideoCover from "@assets/empty_kuang.png";
import MsGetButton from "@assets/ms_get_button.png";
import MZrmk from "@assets/mz_rmk.png";
import Card from "@assets/solid_kuang.png";

import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import React, { Component } from "react";
import styles from "./index.module.scss";

import CustomizedYearButton from "@assets/customized_year_button.png";
import DownloadButton from "@assets/download_button.png";

import PlayIcon from "@assets/play.png";

import { submitDay } from "@api";
import {
  getChannel,
  getSecondMoveVideo,
  navigateToMiniHome,
} from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";

const channel = localStorage.getItem("channel");
const videoSource = getSecondMoveVideo(channel);
console.log("videoSource is", videoSource);

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      playStatus: false,
      showFlag: true,
      type: "video", // card video
    };
    this.videoRef = "";
  }

  componentDidMount() {
    submitDay({
      code: channel,
    });

    window._ha("send", "action", "cny_activity3_h5couppage_view", {
      campaign_id: CampaignIds.activity3,
      channel: getChannel(),
    });
  }
  handlerClick = () => {
    const { playStatus } = this.state;
    if (playStatus) {
      this.setState({
        playStatus: false,
      });

      this.videoRef.pause();
    } else {
      this.setState({
        playStatus: true,
      });

      this.videoRef.play();
      this.videoRef.addEventListener("ended", () => {
        this.setState({
          playStatus: false,
        });
      });
    }
  };
  // 获取妙招
  handlerGetMs = () => {
    this.props.navigate(`/activity_sign_3?day=${channel}`);

    window._ha("send", "action", "cny_activity3_h5couppage_coupget_click", {
      campaign_id: CampaignIds.activity3,
      channel: getChannel(),
    });
  };

  handlerCustomized = () => {
    navigateToMiniHome(
      "/pages/userPackage/FY2324CNYBeSpoke?scene=luckydraw",
      () => {
        this.props.navigate("/");
      }
    );

    window._ha("send", "action", "cny_activity3_h5couppage_gotovideo_click", {
      campaign_id: CampaignIds.activity3,
      channel: getChannel(),
    });
  };
  // 保存视频
  handlerDownload = () => {};

  render() {
    const { showFlag, type, playStatus } = this.state;
    return (
      <BaseBackground
        backgroundImage={BackgroundImg}
        showFlag={showFlag}
        bigLogo={true}
      >
        {type === "card" ? (
          <>
            <img src={Card} className={styles.card} alt="" />

            <img src={MZrmk} className={styles.mz_rmk} alt="" />

            <div className={styles.option_button_group}>
              <img
                src={DownloadButton}
                className={styles.download_button}
                onClick={this.handlerDownload}
                alt=""
              />
              <img
                src={CustomizedYearButton}
                className={styles.customized_year_button}
                onClick={this.handlerCustomized}
                alt=""
              />
            </div>
          </>
        ) : (
          <div className={styles.video_box}>
            <div className={styles.video_content}>
              <div className={styles.video}>
                <video
                  style={{
                    backgroundImage: `url(${videoSource.poster})`,
                  }}
                  className={styles.video_ref}
                  src={videoSource.url}
                  poster={videoSource.poster}
                  preload="auto"
                  controls={false}
                  playsInline
                  ref={(video) => (this.videoRef = video)}
                ></video>
              </div>
              <img
                src={VideoCover}
                className={styles.cover}
                alt="videoCover"
                onClick={() => {
                  if (playStatus) {
                    this.handlerClick();
                  }
                }}
              />

              {playStatus ? (
                ""
              ) : (
                <img
                  onClick={this.handlerClick}
                  className={styles.play_icon}
                  src={PlayIcon}
                  alt="PlayIcon"
                />
              )}
            </div>
            <div className={styles.option_button_group}>
              <img
                src={MsGetButton}
                className={styles.ms_get_button}
                onClick={this.handlerGetMs}
                alt=""
              />
              <img
                src={CustomizedYearButton}
                className={styles.customized_year_button}
                onClick={this.handlerCustomized}
                alt=""
              />
            </div>
          </div>
        )}
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
